{% extends 'base.html' %}

{% block title %}{% if deployment.id %}编辑{% else %}新增{% endif %}部署信息 - 项目管理系统{% endblock %}

{% block content %}
<div class="card">
  <div class="card-header card-header-flex">
    <div>
      <h5>{% if deployment.id %}编辑{% else %}新增{% endif %}部署信息</h5>
      <p class="text-muted mb-0">项目: {{ project.name }}</p>
    </div>
    <a href="{{ url_for('project_detail', project_id=project.id) }}" class="btn btn-secondary">
      <i class="fas fa-arrow-left"></i> 返回项目
    </a>
  </div>
  
  <div class="card-body">
    <form method="post" class="deployment-form">
      <!-- 基本信息部分 -->
      <div class="form-section mb-4 info-form">
        <h6 class="form-section-title border-bottom pb-2 mb-3">
          <i class="fas fa-info-circle text-primary"></i> 基本信息
        </h6>
        
        <div class="field-row">
          <label for="deploy_type_id">部署类型 <span class="text-danger">*</span></label>
          <div class="field-content">
            <i class="fas fa-server icon"></i>
            <select class="form-control" id="deploy_type_id" name="deploy_type_id" required>
              {% for deploy_type in deploy_types %}
              <option value="{{ deploy_type.id }}" {% if deploy_type.id == deployment.deploy_type_id %}selected{% endif %}>{{ deploy_type.name }}</option>
              {% endfor %}
            </select>
          </div>
        </div>
        
        <div class="field-row">
          <label for="host_ip">主机IP <span class="text-danger">*</span></label>
          <div class="field-content">
            <i class="fas fa-network-wired icon"></i>
            <input type="text" class="form-control" id="host_ip" name="host_ip" value="{{ deployment.host_ip }}" placeholder="127.0.0.1" required>
          </div>
          <small class="form-text text-muted">服务器IP地址，例如：192.168.1.100</small>
        </div>
        
        <div class="field-row">
          <label for="username">登录用户名</label>
          <div class="field-content">
            <i class="fas fa-user icon"></i>
            <input type="text" class="form-control" id="username" name="username" value="{{ deployment.username }}" placeholder="root">
          </div>
          <small class="form-text text-muted">登录服务器的用户名，不填则使用默认配置</small>
        </div>
        
        <div class="field-row">
          <label for="directory">部署目录 <span class="text-danger">*</span></label>
          <div class="field-content">
            <i class="fas fa-folder icon"></i>
            <input type="text" class="form-control" id="directory" name="directory" value="{{ deployment.directory }}" placeholder="/var/www/html" required>
          </div>
          <small class="form-text text-muted">项目部署的完整路径，例如：/var/www/html/myapp</small>
        </div>
      </div>
      
      <!-- 命令配置部分 -->
      <div class="form-section mb-4 info-form">
        <h6 class="form-section-title border-bottom pb-2 mb-3">
          <i class="fas fa-terminal text-primary"></i> 命令配置
        </h6>
        
        <div class="field-row">
          <label for="start_command">启动命令</label>
          <div class="field-content">
            <i class="fas fa-play icon"></i>
            <textarea class="form-control code-area" id="start_command" name="start_command" rows="2" placeholder="./start.sh">{{ deployment.start_command }}</textarea>
          </div>
          <small class="form-text text-muted">用于启动应用的命令，可以是shell脚本或直接命令</small>
        </div>
        
        <div class="field-row">
          <label for="stop_command">停止命令</label>
          <div class="field-content">
            <i class="fas fa-stop icon"></i>
            <textarea class="form-control code-area" id="stop_command" name="stop_command" rows="2" placeholder="./stop.sh">{{ deployment.stop_command }}</textarea>
          </div>
          <small class="form-text text-muted">用于停止应用的命令</small>
        </div>
        
        <div class="field-row">
          <label for="status_check_command">状态检查命令</label>
          <div class="field-content">
            <i class="fas fa-heartbeat icon"></i>
            <textarea class="form-control code-area" id="status_check_command" name="status_check_command" rows="2" placeholder="ps -ef | grep myapp">{{ deployment.status_check_command }}</textarea>
          </div>
          <small class="form-text text-muted">用于检查应用运行状态的命令</small>
        </div>
      </div>
      
      <!-- 其他配置 -->
      <div class="form-section mb-4 info-form">
        <h6 class="form-section-title border-bottom pb-2 mb-3">
          <i class="fas fa-cog text-primary"></i> 其他配置
        </h6>
        
        <div class="field-row">
          <label for="log_path">日志路径</label>
          <div class="field-content">
            <i class="fas fa-file-alt icon"></i>
            <input type="text" class="form-control" id="log_path" name="log_path" value="{{ deployment.log_path }}" placeholder="/var/log/myapp">
          </div>
          <small class="form-text text-muted">应用日志文件的路径，方便查看日志</small>
        </div>
        
        <div class="field-row">
          <label for="description">描述</label>
          <div class="field-content">
            <i class="fas fa-comment icon"></i>
            <textarea class="form-control" id="description" name="description" rows="3" placeholder="部署环境的详细描述...">{{ deployment.description }}</textarea>
          </div>
          <small class="form-text text-muted">关于此部署环境的补充说明</small>
        </div>
      </div>
      
      <hr>
      
      <div class="form-group row">
        <div class="col-sm-10 offset-sm-2">
          <button type="submit" class="btn btn-primary">
            <i class="fas fa-save"></i> 保存
          </button>
          <a href="{{ url_for('project_detail', project_id=project.id) }}" class="btn btn-secondary ml-2">
            <i class="fas fa-times"></i> 取消
          </a>
        </div>
      </div>
    </form>
  </div>
</div>

<style>
  .form-section-title {
    color: #495057;
    font-weight: 500;
  }
  
  .code-area {
    font-family: Consolas, Monaco, 'Courier New', monospace;
    font-size: 0.9rem;
  }
  
  .input-group-text {
    background-color: #f8f9fa;
  }
  
  /* 添加必填字段标记的样式 */
  label span.text-danger {
    font-weight: bold;
    margin-left: 2px;
  }
  
  /* 确保表单字段在同一行 */
  .field-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
  }
  
  .field-row label {
    min-width: 120px;
    margin-right: 15px;
    margin-top: 7px;
    text-align: right;
    font-weight: 500;
  }
  
  .field-row .field-content {
    display: flex;
    align-items: center;
    flex: 1;
  }
  
  .field-row .icon {
    margin-right: 10px;
    font-size: 16px;
    color: #6c757d;
    width: 20px;
    text-align: center;
  }
  
  .field-row small {
    display: block;
    margin-top: 5px;
    color: #6c757d;
  }
  
  /* 修复表单中的文本区域样式 */
  .field-row textarea {
    height: auto;
    min-height: 70px;
  }
</style>
{% endblock %} 